import {createSlice, PayloadAction} from "@reduxjs/toolkit";


type themeT = 'dark' | 'light'

// # SystemState
export interface SystemState {
    // 主题
    theme: themeT

    // 是否全屏
    isFullScreen: boolean;

    // 刷新页面
    flushPage: number;

    // 是否折叠右侧导航
    adminCollapsedLeftNav: boolean;

    // 是否显示面包屑
    adminShowBreadcrumb: boolean;

    // 前台页面名
    frontPageName?: string;

    // cmdk
    adminShowCmdk: boolean;

    // 导航选择
    adminSelectTopNavKeyPath: string[]
    adminSelectLeftNavKeyPath: string[]
    adminOpenLeftNavKeys: string[]

    // 开启Vconsole
    enableVConsole: boolean
}

const initialState: SystemState = {
    flushPage: Math.random(),
    adminShowBreadcrumb: true,
    adminCollapsedLeftNav: localStorage.getItem("adminCollapsedLeftNav") == "true",
    adminShowCmdk: false,
    adminSelectTopNavKeyPath: ["projectCenter"],
    adminSelectLeftNavKeyPath: window.location.pathname.split("/").splice(2),
    theme: function () {
        const theme = localStorage.getItem("theme") as themeT ?? "dark"
        document.body.setAttribute("theme-mode", theme);
        return theme
    }(),
    isFullScreen: false,
    adminOpenLeftNavKeys: [],
    enableVConsole: (localStorage.getItem("enableVConsole") ?? "true") == "true",
};

export const systemSlice = createSlice({
    name: "system",
    initialState,
    reducers: {
        switchTheme: (state:SystemState) => {
            state.theme = state.theme == 'dark' ? 'light' : 'dark'
            document.body.setAttribute("theme-mode", state.theme);
            localStorage.setItem("theme", state.theme);
        },
        onFlushPage: () => {
            window.location.reload()
        },
        switchAdminShowBreadcrumb: (state:SystemState) => {
            state.adminShowBreadcrumb = !state.adminShowBreadcrumb
        },
        setFrontPageName: (state:SystemState, action: PayloadAction<string>) => {
            state.frontPageName = action.payload
        },
        switchAdminCollapsedLeftNav: (state:SystemState) => {
            state.adminCollapsedLeftNav = !state.adminCollapsedLeftNav
            localStorage.setItem("adminCollapsedLeftNav", `${state.adminCollapsedLeftNav}`)
        },
        switchAdminShowCmdk: (state:SystemState) => {
            state.adminShowCmdk = !state.adminShowCmdk;
        },
        changeAdminSelectTopNavKeyPath: (state:SystemState, action: PayloadAction<string[]>) => {
            state.adminSelectTopNavKeyPath = action.payload
        },
        changeAdminSelectLeftNavKeyPath: (state:SystemState, action: PayloadAction<string[]>) => {
            state.adminSelectLeftNavKeyPath = action.payload
        },
        changeAdminOpenLeftNavKeys: (state:SystemState, action: PayloadAction<string[]>) => {
            state.adminOpenLeftNavKeys = action.payload
        },
        switchFullScreen: (state:SystemState) => {
            if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen();
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                }
            }
            state.isFullScreen = !state.isFullScreen
        },
        switchVConsole: (state:SystemState) => {
            state.enableVConsole = !state.enableVConsole
            localStorage.setItem("enableVConsole", `${state.enableVConsole}`)
        }
    },
});

export const {
    switchTheme,
    onFlushPage,
    changeAdminSelectLeftNavKeyPath,
    changeAdminOpenLeftNavKeys,
    changeAdminSelectTopNavKeyPath,
    switchFullScreen,
    switchAdminShowCmdk,
    switchAdminCollapsedLeftNav,
    setFrontPageName,
    switchAdminShowBreadcrumb,
    switchVConsole
} = systemSlice.actions;
export default systemSlice.reducer;
